(function() {

	async function getFilmById(id) {
		let {
			data: r
		} =
		await axios({
			url: 'data/film_list.json'
		})

		const f = r.find(function(val) {
			return val.film_id == id;
		})
		console.log(id);
		console.log(f);

		//分类
		let categoryList = f.category_list;
		let category = ``;
		categoryList.forEach(function(val) {
			category += `<div class="mr-2">${val.category_name}</div>`;
		})

		//区域
		let countryList = f.country_list;
		let country = ``;
		countryList.forEach(function(val) {
			country += `<div class="mr-2">${val.country_name}</div>`;
		})
		//详情
		let div = `<div class="container d-flex align-items-start"><img src="img/${f.film_cover_image}"
							class="w-18 p-1 shadow rounded bg-white mr-4">
				<div>
					<div class="text-white text-large text-bolder">${f.film_name}</div>
					<div class="text-white text-big text-bold mt-1">${f.film_title}</div>
					<div class="text-white text-sm d-flex mt-3">
						${category}
					</div>
					<div class="text-white text-sm d-flex mt-1">
						${country}
						<div class="mr-2">/</div>
						<div class="mr-2">179分钟</div>
					</div>
					<div class="text-white text-sm d-flex mt-1">
						<div class="mr-2">${f.film_release_date}</div>
						<div class="mr-2">中国大陆上映</div>
					</div>
					<div class="mt-3 d-flex align-items-end">
						<div class="mr-5">
							<div><button
									class="px-5 py-2 rounded outline-0 border-0 hand text-white bg-white-alpha mr-2">
									想 看 </button><button
									class="px-5 py-2 rounded outline-0 border-0 hand text-white bg-white-alpha">
									评分 </button></div><button
								class="mt-2 px-6 py-2 rounded outline-0 border-0 hand text-white bg-red-alpha pay">
								特惠购票 </button>
						</div>
						<div>
							<div class="text-xs text-white">猫眼口碑</div>
							<div class="d-flex align-items-center">
								<div class="text-xl text-bolder text-red mr-2">${f.film_rank}</div>
								<div>
									<div>
										<!---->
										<!----><img src="./img/star_on.png" class="w-1rem">
										<!---->
										<!----><img src="./img/star_on.png" class="w-1rem">
										<!---->
										<!----><img src="./img/star_on.png" class="w-1rem">
										<!----><img src="./img/star_half.png" class="w-1rem">
										<!----><img src="./img/star_off.png" class="w-1rem">
										<!---->
										<!---->
									</div>
									<div class="text-white text-xs">12936人评分 </div>
								</div>
							</div>
							<div class="mt-2 text-white text-xs">累计票房</div>
							<div class="d-flex align-items-baseline">
								<div class="text-xl text-white text-bolder mr-2">${f.film_box}</div>
								<div class="text-sm text-white">亿</div>
							</div>
						</div>
					</div>
				</div>
			</div>`;
		$('.film-details').append(div);
		//绑定事件
		$('.pay').click(function() {
			location.href = "选座.html";
		})
		//导演
		let directorList = f.director_list;
		let director = ``;
		directorList.forEach(function(val) {
			director += `
			<img src="./img/${val.director_cover_image}" class="mt-3 shadow hand rounded p-1">
			<div class="mr-2">${val.director_name}</div>`;
		})
		$('.director').append(director);
		//演员
		let actorList = f.actor_list;
		let actor = ``;
		actorList.forEach(function(val) {
			actor += `<div align="center">
						<img src="./img/${val.actor_cover_image}" class="mt-3 shadow hand rounded p-1">
						<div class="mt-2 text-center text-gray">${val.actor_name}</div>
						<div class="mt-2 text-center text-muted text-xs">饰：${val.play} Frodo</div>
					</div>`;
		})
		$('.actor').append(actor);

	}
	getFilmById(localStorage.getItem("filmId"));
})()
